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<html>
<head>
	<title>Majid</title>
	<<style >
		table td,th
		{
			border: 1px solid black;
			width: 33%;
			text-align: center;
			background-color: DarkGray;
			border-collapse: collapse;
		}
		table{margin: auto;}
		input{text-align: right;}
	</style>
	<script  type="text/javascript" >
		function calc(clicked_id)
		{
			var val1=parseFloat(document.getElementById("value1").value);
			var val2=parseFloat(document.getElementById("value2").value);
			if(isNaN(val1)||isNaN(val2))
				alert("Enter valid number");
			else if(clicked_id=="add")
				document.getElementById("answer").value=val1+val2;
			else if(clicked_id=="sub")
				document.getElementById("answer").value=val1-val2;
			else if(clicked_id=="mul")
				document.getElementById("answer").value=val1*val2;
			else if(clicked_id=="div")
				document.getElementById("answer").value=val1/val2;
			
			
			
		}
		function cls() {
			value1.value="0";
			value2.value="0";
			answer.value="0";
			// body...
		}
	</script>
</head>
<body>
	<<table>
		<tr>
			<th colspan="4">SIMPLE CLACULATOR</th>	</tr>
		<tr>
			<td>Value 1</td><td><input type="text" id="value1" value="0"/></td>
			<td>Value 2</td><td><input type="text" id="value2" value="0"/></td>
		</tr>
		<tr>
			<td><input type="button" value="Addition" id="add" onclick="calc(this.id)"/></td>
			<td><input type="button" value="Subtraction" id="sub" onclick="calc(this.id)"/></td>
			<td><input type="button" value="Multiplication" id="mul" onclick="calc(this.id)"/></td>
			<td><input type="button" value="Division" id="div" onclick="calc(this.id)"/></td>
		</tr>	
		<tr>
			<td>Answer</td><td><input type="text" id="answer" value="" disabled/></td>
			<td colspan="2"><input type="button" value="CLEAR ALL" onclick="cls()"/></td>
		</tr>
	</table>
</body>
</html>